<template>
    <div class="subjects-container">
        <el-card class="content-card">
            <div class="toolbar">
                <el-button type="primary" @click="dialogVisible = true">添加考试</el-button>
            </div>

            <el-table :data="exams" height="calc(100vh - 200px)">
                <el-table-column prop="id" label="考试编号" width="120" />
                <el-table-column prop="name" label="考试名称" width="200" />
                <el-table-column prop="examDate" label="考试日期" width="120" />
                <el-table-column prop="totalScore" label="总分" width="120" />
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <el-dialog v-model="dialogVisible" :title="isEdit ? '编辑考试' : '添加考试'">
            <el-form :model="examForm" :rules="rules" ref="formRef">
                <el-form-item label="考试名称" prop="name">
                    <el-input v-model="examForm.name" />
                </el-form-item>
                <el-form-item label="考试日期" prop="examDate">
                    <el-date-picker v-model="examForm.examDate" type="date" placeholder="选择日期" />
                </el-form-item>
                <el-form-item label="总分" prop="totalScore">
                    <el-input-number v-model="examForm.totalScore" :min="0" :max="150" :step="5" />
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="handleSubmit">确定</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { examApi } from '@/api'

const exams = ref([])
const dialogVisible = ref(false)
const isEdit = ref(false)
const currentId = ref(null)

const examForm = reactive({
    name: '',
    examDate: '',
    totalScore: 100
})

const rules = {
    name: [{ required: true, message: '请输入考试名称', trigger: 'blur' }],
    examDate: [{ required: true, message: '请选择考试日期', trigger: 'change' }],
    totalScore: [{ required: true, message: '请输入总分', trigger: 'blur' }]
}

// 获取考试列表
const fetchExams = async () => {
    try {
        // 模拟 API 调用
        const data = await examApi.getExams()
        // const data = [
        //     {
        //         id: 'EX2024001',
        //         name: '2024年高三第一次月考',
        //         examDate: '2024-03-15',
        //         totalScore: 150
        //     },
        //     {
        //         id: 'EX2024002',
        //         name: '2024年高三期中考试',
        //         examDate: '2024-04-20',
        //         totalScore: 100
        //     },
        //     {
        //         id: 'EX2024003',
        //         name: '2024年高三第二次月考',
        //         examDate: '2024-05-15',
        //         totalScore: 150
        //     },
        //     {
        //         id: 'EX2024004',
        //         name: '2024年高三期末考试',
        //         examDate: '2024-07-01',
        //         totalScore: 150
        //     }
        // ]
        exams.value = data
    } catch (error) {
        console.error('获取考试列表失败:', error)
    }
}

const handleEdit = (row) => {
    isEdit.value = true
    currentId.value = row.id
    Object.assign(examForm, row)
    dialogVisible.value = true
}

const handleDelete = (row) => {
    ElMessageBox.confirm('确定要删除该考试吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(async () => {
        try {
            await examApi.deleteExam(row.id)
            ElMessage.success('删除成功')
            fetchExams()
        } catch (error) {
            console.error('删除失败:', error)
        }
    }).catch(() => { })
}

const resetForm = () => {
    examForm.name = ''
    examForm.examDate = ''
    examForm.totalScore = 100
    isEdit.value = false
    currentId.value = null
}

const handleSubmit = async () => {
    try {
        if (isEdit.value) {
            await examApi.updateExam(currentId.value, examForm)
            ElMessage.success('编辑成功')
        } else {
            await examApi.createExam(examForm)
            ElMessage.success('添加成功')
        }
        dialogVisible.value = false
        resetForm()
        fetchExams()
    } catch (error) {
        console.error('操作失败:', error)
    }
}

// 页面加载时获取数据
fetchExams()
</script>

<style scoped>
.subjects-container {
    height: 100%;
    width: 100%;
}

.content-card {
    height: 100%;
}

.toolbar {
    margin-bottom: 20px;
}

:deep(.el-card__body) {
    height: 100%;
    padding: 20px;
}

:deep(.el-dialog__body) {
    padding-top: 10px;
}
</style>